<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基本架构思想-导读</title>
    <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <!-- 引入 layui.css -->
    <link href="//unpkg.com/layui@2.7.6/dist/css/layui.css" rel="stylesheet">
    <!-- 引入 layui.js -->
    <script src="//unpkg.com/layui@2.7.6/dist/layui.js"></script>

    <!-- 基类 js -->
    <script src="./js/baseJS.js"></script>
</head>

<body>
    <div style="height: auto;width: 800px;margin:auto;margin-top: 3%;display: flex;flex-direction: column;">
        <span class="h3">前端工程 构建笔记</span> <br>
        <ul class="list-group">
            <li class="list-group-item">
                <button type="button" class="btn" data-bs-toggle="collapse" data-bs-target="#htmlDemo"
                    style="margin-bottom: 5px;">基本html搭建</button>
                <div id="htmlDemo" class="collapse show">
                    <ul class="list-group">
                        <li class="list-group-item">
                            <a href="./FlexBaseDemo.html">flex属性排版</a>
                        </li>
                    </ul>
                </div>
            </li>
            <li class="list-group-item">
                <button type="button" class="btn" data-bs-toggle="collapse" data-bs-target="#fileDemo"
                    style="margin-bottom: 5px;">相关文档记录</button>
                <div id="fileDemo" class="collapse">
                    <ul class="list-group">
                        <li class="list-group-item">
                            <a href="./Ts.html">TS 的理解</a><br>
                        </li>
                        <li class="list-group-item">
                            <a href="./vue3_ts.html">vue3/vite/ts 搭建全流程</a>
                        </li>
                    </ul>
                </div>
            </li>
            <li class="list-group-item">
                <button type="button" class="btn" data-bs-toggle="collapse" data-bs-target="#toolDemo"
                    style="margin-bottom: 5px;">工具链接栏目</button>
                <div id="toolDemo" class="collapse">
                    <ul class="list-group">
                        <li class="list-group-item"><a
                                href="https://9499574.github.io/layui-form-create/">layui表单代码生成</a></li>
                        <li class="list-group-item">
                            <a href="http://vue.ruoyi.vip/tool/build">若依vue表单生成工具</a>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;备注 ： 在系统工具下的表单构建
                        </li>
                        <li class="list-group-item">
                            <a href="https://vform666.com/vform3.html?from=element_plus">element-PlusVue表单生成工具</a>
                        </li>
                    </ul>
                </div>
            </li>
            <li class="list-group-item">
                <button type="button" class="btn" data-bs-toggle="collapse" data-bs-target="#Vue3Demo"
                    style="margin-bottom: 5px;">vue3 项目文件</button>
                <div id="Vue3Demo" class="collapse">
                    <ul class="list-group">
                        <li class="list-group-item">
                            <button type="button" class="btn" data-bs-toggle="collapse" data-bs-target="#vue3_1"
                                style="margin-bottom: 5px;">后台增删改查案例demo</button>
                            <div id="vue3_1" class="collapse">
                                <ul class="list-group">
                                    <li class="list-group-item"><a href="./vue3demo/crud/view.html" class="btn">view</a>
                                    </li>
                                    <li class="list-group-item"><a href="./vue3demo/crud/api.html" class="btn">api</a>
                                    </li>
                                    <li class="list-group-item"><a href="./vue3demo/crud/router.html"
                                            class="btn">router</a></li>
                                    <li class="list-group-item"><a href="./vue3demo/crud/interface.html"
                                            class="btn">interface</a></li>
                                </ul>
                            </div>

                        </li>
                    </ul>
                </div>
            </li>

            <li class="list-group-item">
                <button type="button" class="btn" data-bs-toggle="collapse" data-bs-target="#FrontEndPractice"
                style="margin-bottom: 5px;">前端训练路线</button>
                <div id="FrontEndPractice" class="collapse">
                    <ul class="list-group">
                        <li class="list-group-item">基本UI框架熟悉</li>
                        <li class="list-group-item">脚本编程 JavaScript</li>
                        <li class="list-group-item">
                            <button type="button" class="btn btn-sm" data-bs-toggle="collapse" data-bs-target="#FrontEndAndBackEnd"
                            style="margin-bottom: 5px;">前后端分离 VUE2</button>
                            <div id="FrontEndAndBackEnd" class="collapse">
                                <ul class="list-group">
                                    <li class="list-group-item">
                                        <button type="button" class="btn btn-sm" data-bs-toggle="collapse" data-bs-target="#BaseVue"
                                        style="margin-bottom: 5px;">基本vue框架技能</button>
                                        <div id="BaseVue" class="collapse">
                                            <ul class="list-group">
                                                <li class="list-group-item">指令</li>
                                                <li class="list-group-item">组件父子传值</li>
                                                <li class="list-group-item">数据监视-计算属性</li>
                                                <li class="list-group-item">单组件抽象化概念</li>
                                                <li class="list-group-item">生命周期的灵活使用</li>
                                                <li class="list-group-item">vuex组件数据管理</li>
                                                <li class="list-group-item">router路由跳转</li>
                                                <li class="list-group-item">单页应用</li>
                                                <li class="list-group-item">对框架的深度理解</li>
                                            </ul>

                                        </div>
                                    </li>
                                    <li class="list-group-item">封装路由</li>
                                    <li class="list-group-item">封装UI框架</li>
                                    <li class="list-group-item">封装API</li>
                                    <li class="list-group-item">API权限检验-token</li>
                                    <li class="list-group-item">封装拦截器</li>
                                </ul>
                            </div>
                            
                        </li>
                    </ul>
                </div>
            </li>

        </ul>



        <div class="card" id="footer" style="margin-bottom: 25px;">
            <div class="card-body" style="margin-left:10% ;margin-right:10% ;margin-top: 15px;">
                开源地址： <a
                    href="https://gitee.com/huishao-online-didi/vue3-learning-notes.git">https://gitee.com/huishao-online-didi/vue3-learning-notes.git</a><br>
                点击邮我！：<a id="openSendEmail">1943133326@qq.com</a>
            </div>
            
        </div>

        <div class="layui-anim layui-anim-scale" id="msg" style="display: none;">
            <div>
                <p>邮件发送成功！</p>
                <img src="https://img0.baidu.com/it/u=1687336489,1326644303&fm=253&fmt=auto&app=138&f=JPEG?w=425&h=319" alt="">
            </div>
        </div>
    </div>



    <button type="button" id="openEmailModal" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#EmailModal" style="display: none;"></button>
    <!-- 模态框 -->
    <div class="modal fade" id="EmailModal">
      <div class="modal-dialog">
        <div class="modal-content">
          <!-- 模态框头部 -->
          <div class="modal-header">
            <h4 class="modal-title">发送邮件</h4></h4>
            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
          </div>
          <!-- 模态框内容 -->
          <div class="modal-body">
                    <input style="margin-bottom:3px" type="text" class="form-control" id="title" placeholder="请输入您的建议概要">
                    <textarea class="form-control" rows="5" id="content" type="text" placeholder="请输入留言内容"></textarea>
          </div>
          <!-- 模态框底部 -->
          <div class="modal-footer">
            <button type="button" class="btn btn-primary" id="sendBtn">一键发送</button>
            <button type="button" class="btn btn-danger" data-bs-dismiss="modal" id="closeEmailModal">关闭</button>
          </div>
    
        </div>
      </div>
    </div>


</body>
<style>
    #footer {
        height: 124px;
        margin-top: 10px;
    }
</style>

</html>